import React, { Component } from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet,
  useNavigate,
  useParams,
  useLocation,
} from "react-router-dom";
import "./index.css";
const Home = () => {
  return (
    <>
      <div>默认页面</div>
    </>
  );
};
const Login = () => {
  return (
    <>
      <div>这是login</div>
    </>
  );
};
const News = () => {
  const Nav = useNavigate();
  return (
    <>
      <div onClick={() => Nav("/news/a/123")}>这是news页面</div>
      <Outlet></Outlet>
    </>
  );
};
const NewsA = () => {
  const params = useParams();
  const location = useLocation();
  console.log(params, location);

  return (
    <>
      <div>这是news的子页面</div>
    </>
  );
};
const Xixi = () => {
  return (
    <>
      <div>这是Xixi的子页面</div>
    </>
  );
};
export default function ComRoute() {
  return (
    <>
      <ul>
        <BrowserRouter>
          {/* <li>
            <Link to="/">默认页面</Link>
            <Link to="/home">跳转到home</Link>
            <Link to="/news">跳转到news</Link>
            <Link to="/xixi">跳转到xixi</Link>
          </li>{" "} */}
          <Routes>
            <Route path="/" element={<Home></Home>}></Route>
            <Route path="/login" element={<Login></Login>}></Route>
            <Route path="/news" element={<News></News>}>
              <Route path="/news/a/:id" element={<NewsA></NewsA>}></Route>
            </Route>
            <Route path="/xixi" element={<Xixi></Xixi>}></Route>
          </Routes>
        </BrowserRouter>
      </ul>
    </>
  );
}
